<!--  -->
<template>
    <HomeBox title="首页">
        <view
            class="bg-[#007aff] absolute top-0 left-0 right-0 h-56 z-0"
        ></view>
        <view class="p-4 relative z-10 h-full">
            <view
                class="h-11 flex space-x-2 bg-white items-center px-2 rounded-md"
            >
                <view class="w-16">
                    <uni-data-select
                        v-model="searchRegion"
                        :localdata="range"
                        :clear="false"
                        @change="change"
                    ></uni-data-select>
                </view>
                <view class="h-1/2 divide-line"></view>
                <uni-search-bar
                    style="width: calc(100% - 6rpx - 32rpx - 64rpx)"
                    v-model="searchValue"
                    placeholder="请输入内容"
                    bgColor="#fff"
                    @confirm="search"
                    @blur="search"
                />
            </view>
            <ActionTable></ActionTable>
            <IndustryNews></IndustryNews>
            <RecommendedHousing></RecommendedHousing>
        </view>
    </HomeBox>
</template>

<script setup lang="ts">
import ActionTable from "@/components/ActionTable/index.vue";
import HomeBox from "@/components/HomeBox/index.vue";
import IndustryNews from "@/components/IndustryNews/index.vue";
import RecommendedHousing from "@/components/RecommendedHousing/index.vue";
import { ref } from "vue";
const searchValue = ref("");
const searchRegion = ref(0);
const range = ref([
    { value: 0, text: "吴江" },
    { value: 1, text: "苏州" },
    { value: 2, text: "其他" },
]);
const search = () => {
    console.log(searchValue.value);
};
const change = () => {};
</script>
<style scoped lang="scss"></style>
